<script setup>
import { ref,reactive} from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
const tableData = [

    {
        id:1,
        name:"张三",
        age:25,
        cardInfos:['金卡','银卡'],
        sex:'男',
        createTime:'2022-01-01',
        updateTime:'2022-01-01',
        status:'正常'
    },
    {
        id:2,
        name:"张小明",
        age:25,
        cardInfos:['金卡','银卡'],
        sex:'男',
        createTime:'2022-01-01',
        updateTime:'2022-01-01',
        status:'正常'
    },
    {
        id:3,
        name:"张三三",
        age:25,
        cardInfos:['金卡','银卡'],
        sex:'男',
        createTime:'2022-01-01',
        updateTime:'2022-01-01',
        status:'正常'
    },
    
]
const multipleTableRef = ref()
const multipleSelection = ref([])

const handleSelectionChange = (val) => {
    multipleSelection.value = val
    console.log(val)
}

//编辑事件
const handleEdit = (index, row) => {
    console.log(index, row);
}

//删除实际爱你 
const handleDelete = (index, row) => {
    console.log(index, row);
    ElMessageBox.confirm('此操作将永久删除会员码, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        //todo 调用后端删除接口
        ElMessage({
            type: 'success',
            message: '删除成功!'
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '已取消删除'
        })
    })
}
</script>

<template>
    <h1>会员管理</h1>
    <div>
        <el-button type="primary">添加会员</el-button>
        <el-button type="danger">删除所有</el-button>
    </div>
    <div class="table-container">
        <el-table :data="tableData" ref="multipleTableRef" style="width: 100%" border
            @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="name" label="姓名" width="180" />
            <el-table-column prop="sex" label="性别" />
            <el-table-column prop="createTime" label="创建时间" />
            <el-table-column prop="status" label="状态" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button type="primary"  @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger"  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>
    </div>
</template>

<style scoped>
.table-container {
    margin: 20px;
}
</style>
